<template>
  <div class="main-info">
    <div class="page-bg-color"></div>
    <div class="page-bg-color2"></div>
    <div class="page-bg-grid"></div>
    <div class="page-bg-grid2"></div>
    <div class="page-bg-grid3"></div>
    <div class="page-bg-grid4"></div>
    <div class="page-content">
      <div class="banner"></div>
      <div class="competition-list">
        <div class="competition-item" v-for="item in competitions" :key="item.id">
          <div class="item-icon">
            <img :src="item.image" :alt="item.title" />
          </div>
          <p>{{ item.indexName }}</p>
        </div>
        <div class="competition-item only-text dark text-left">
          <p>编程任务赛：</p>
          <p>
            分为小学物流搬运任务、中学灭火挑战任务，小学任务执行飞机为1台，任务执行时长为3分钟，中学任务执行飞机为2台，任务总时长为9分钟，需两台无人机协作完成飞行。
          </p>
          <p>核心价值：</p>
          <p>教育性：融合编程、物理、工程思维，培养STEAM能力</p>
          <p>趣味性：结合无人机操控与编程任务，兼具竞技性与创造性</p>
          <p>权威性：电子学会、世界机器人大会颁发证书，提升升学背景含金量</p>
        </div>
        <div class="competition-item only-text">
          <p>
            “极速任务赛”是一项面向小学生的2V2无人机团队对抗赛，旨在通过趣味竞技培养青少年的团队协作能力、无人机操控技能及策略思维。比赛场地为长6米×宽4米的矩形区域，划分为任务区、穿越障碍区、选手移动区及起降区,并配备安全防护栏确保参赛安全。通过竞技与规则实践,比赛不仅提升学生的动手能力与反应速度，更强化规则意识抗压能力及团队合作精神，为青少年科技教育注入活力。
          </p>
        </div>
        <div class="competition-item only-text dark">
          <p>
            “战术大师-棋奕争锋”是以无人机精准投放为主，以双方抢局、战术干扰、战术布局为辅的开放型比赛。在限时比赛中，双方选手通过操控无人机在
            8*8的棋盘格上进行五子棋对决，优先投放棋子且连成“五子”的队伍获胜。若比赛时间结束，仍未有队伍连成“五子”，则以棋盘内的双方有效棋子数为判断依据，数量多的一方获胜。
          </p>
        </div>
        <div class="competition-item only-text">
          <p>
            “球形无人机对抗赛”以无人机对抗为主题，重点考验参赛选手对于无人机操控能力和团队配合能力。竞赛采用3v3形式，竞赛时采用回合进攻制，每回合30
            秒，其中前 5 秒为安全时间，5
            秒后方可发起进攻。进攻时，其中一名为进攻球员，两名为防守球员。“进攻球”穿过对方球队的球门后，球队得1分（整个飞机从正面穿过球门计算得分），防守时全队三名球员共同防守。在限定时间内得分多的队伍获胜。
          </p>
        </div>
      </div>
      <div class="about-us">
        <h2 class="title-img">关于我们</h2>
        <div class="about-text">
          FTF青少年无人机赛项项目组致力青少年科技教育领域，着力创新赛事及课程研发，为全国青少年开放共融科技教育平台。FTF青少年无人机赛项以无人机为平台，结合机械设计、智能硬件、自动控制、视觉识别、3D打印、无线通信等技手段，实现无人机任务飞行、货物搬运、自主飞行等未来应用场景。目前设立的有操控、策略、编程等无人机项目，不同的项目其考验的内容均有所不同，侧重的学科也不尽相同。
        </div>
        <h2>About Us</h2>
        <div class="about-text">
          FTF Youth Drone Competition Project Team Committed to the field of youth technologyeducation, we focus on
          innovative competitions and curriculum development, and providean open and inclusive technology education
          platform for young people nationwide. The FTFYouth Drone competition uses drones as a platform, combining
          mechanical desian.intelligent hardware, automatic control, visual recognition, 3D printing,
          wirelesscommunication and other techological means to achieve future application scenarios suchas drone
          mission flight, cargo handling, and autonomous flight. At present, there areunmanned aerial vehicle projects
          such as control, strategy, programming, etc., anddifferent projects have different testing contents and focus
          on different disciplines.
        </div>
      </div>
    </div>
    <div class="contact-bg">
      <div class="contact-warp">
        <p class="green">FTF青少年无人机赛项2025赛季赛事规则.pdf</p>
        <p> 链接：<el-link href=" https://pan.baidu.com/s/1I8524BoDB2CX1tygZyMtTw?pwd=1111" target="_blank">
            https://pan.baidu.com/s/1I8524BoDB2CX1tygZyMtTw?pwd=1111</el-link></p>
        <p>提取码：1111</p>
        <p class="title">负责人联系方式：</p>
        <p>编程任务赛—— 景宏昌：138349871565</p>
        <p>极速任务赛—— 刘籍文：19815819226</p>
        <p>战术大师-棋奕争锋—— 刘旺旺：15658046387</p>
        <p>球形无人机对抗赛—— 欧阳培智：19173326459</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import itemImg1 from '@/assets/item-1.png';
import itemImg2 from '@/assets/item-2.png';
import itemImg3 from '@/assets/item-3.png';
import itemImg4 from '@/assets/item-4.png';
import itemImg5 from '@/assets/item-5.png';
import useAppStore from "@/store/modules/app.js";

const imgList = [itemImg1, itemImg2, itemImg3, itemImg4, itemImg5]
const appStore = useAppStore();
const competitions = computed(() =>
  appStore.competitions.map(item => ({
    ...item,
    image: imgList[item.id - 1]
  }))
)

</script>

<style lang="scss" scoped>
.main-info {
  min-width: 1450px;
  position: relative;
  overflow: visible;

  .page-bg-color,
  .page-bg-color2 {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: 1132px;
    background: linear-gradient(#ff5a00, #f7dcc5);
    z-index: 1;
  }

  .page-bg-color2 {
    top: 1052px;
    bottom: 280px;
    height: auto;
    background: linear-gradient(#f7dcc5, #faf4e5);
  }

  .page-bg-grid,
  .page-bg-grid2,
  .page-bg-grid3,
  .page-bg-grid4 {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: repeating-linear-gradient(0deg, #f95c09 0px, #f95c09 2px, transparent 2px, transparent 60px),
      repeating-linear-gradient(90deg, #ff5a00 0px, #f65c0d 2px, transparent 2px, transparent 60px);
    z-index: 2;
  }

  .page-bg-grid2 {
    top: 0;
    bottom: 300px;
    height: 300px;
    background-image: repeating-linear-gradient(0deg, #ec6322 0px, #e2632d 2px, transparent 2px, transparent 60px),
      repeating-linear-gradient(90deg, #f65c0d 0px, #de612a 2px, transparent 2px, transparent 60px);
  }

  .page-bg-grid3 {
    top: 300px;
    height: 420px;
    background-image: repeating-linear-gradient(0deg, #e2632d 0px, #d66841 2px, transparent 2px, transparent 60px),
      repeating-linear-gradient(90deg, #de612a 0px, #d2765a 2px, transparent 2px, transparent 60px);
  }

  .page-bg-grid4 {
    top: 720px;
    height: 20px;
    background-image: repeating-linear-gradient(90deg, #d2765a 0px, #d2765a 2px, transparent 2px, transparent 60px);
  }
}

.page-content {
  position: relative;
  padding-bottom: 60px;
  z-index: 3;

  .banner {
    display: flex;
    justify-content: space-between;

    &:before {
      content: '';
      display: block;
      width: 250px;
      height: 140px;
      margin-top: 37px;
      background: url(@/assets/bg-left.png) no-repeat center bottom;
      background-size: contain;
    }

    &:after {
      content: '';
      display: block;
      width: 295px;
      height: 210px;
      background: url(@/assets/bg-right.png) no-repeat center bottom;
      background-size: contain;
    }
  }
}

.competition-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 20px;
  margin: 10px auto 0;

  .competition-item {
    width: 18%;
    box-sizing: border-box;
    text-align: center;

    .item-icon {
      font-size: 48px;
      display: inline-block;
      padding: 10px 0 0;

      img {
        user-select: none;
        pointer-events: none;
        border-radius: 18%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
      }
    }

    p {
      color: #330812;
      margin: 4px 0;
      font-size: 20px;
      line-height: 30px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    &.only-text {
      width: 19%;
      margin-top: 25px;
      padding: 20px 16px;
      border-radius: 16px;
      background: linear-gradient(#ff5a00, #f8d3b7);
      text-indent: 25px;

      p {
        text-align: left;
        color: #fff;
        font-size: 15px;
        line-height: 30px;
      }
    }

    &.dark {
      background: linear-gradient(#3f3d3c, #f8d3b7);
    }

    &.text-left {
      width: 40%;
      text-indent: 0;
      text-align: left;
    }
  }
}

.about-us {
  padding: 25px 20px;

  h2 {
    line-height: 65px;
    padding: 25px 0;
    text-align: center;
    color: #df5a21;
    font-size: 48px;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 10px;
    letter-spacing: 13px;
  }

  .title-img {
    background-image: url(@/assets/about-us.png);
    background-repeat: no-repeat;
    background-size: auto 100px;
    background-position: right center;
  }

  .about-text {
    margin-bottom: 20px;
    padding: 0 60px;
    font-size: 22px;
    line-height: 46px;
    color: #47463c;
    letter-spacing: 3px;
    text-align: left;
    text-indent: 25px;
  }
}

.contact-bg {
  position: relative;
  background-color: #330812;
  z-index: 4;
}

.contact-warp {
  font-size: 14px;
  line-height: 30px;
  padding: 10px 0;
  letter-spacing: 3px;
  color: #fff;
  text-align: left;

  p {
    margin: 0 20px;
  }

  .green {
    color: #81d4ab;
  }

  .title {
    color: #de9fa3;
    margin-top: 20px;
  }
}
</style>
